<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <span>GoodList</span>
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price" @click="sortPrice">Price <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterBy">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" :class="{'filterby-show': filterby}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" :class="{'cur': priceCheckout == 'all'}" @click=" setPriceFilter('all')">All</a></dd>
              <dd v-for="(price,index) in PriceFilter" :key="index" >
                <a href="javascript:void(0)" :class="{'cur': priceCheckout == index}"  @click="setPriceFilter(index)"> {{price.startPrice}} - {{price.endPrice}}</a>
              </dd>
            </dl>
          </div>
          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="item in goodsData" 
                    :key ='item.productId
                '>
                  <div class="pic">
                    <a href="#"><img v-lazy ="'/static/'+ item.productImage" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{ item.productName}}</div>
                    <div class="price">{{ item.salePrice}}</div>
                    <div class="btn-area" @click="addCart(item.productId)">
                      <a href="javascript:;" class="btn btn-z-m">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="load-more" 
                 v-infinite-scroll="loadMore"                       infinite-scroll-disabled="buys" 
                 infinite-scroll-distance="10">
              <img src="../assets/loading-spinning-bubbles.svg" alt="" v-show="loading">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 未登录弹出框 -->
    <Modal :mdShow = 'mdShow' @closeModal = 'closeModal'>
      <p slot="message">
        请先登陆无法加入到购物车
      </p>
      <div slot="btnGroup">
        <a href="javascript:;" class="btn btn--m" @click="closeModal">关闭</a>
      </div>
    </Modal>
    <!-- 添加成功消息弹出 -->
    <Modal :mdShow = 'cartShow' @closeModal = 'closeModal'>
      <p slot="message">
        已成功添加到购物车
      </p>
      <div slot="btnGroup">
        <a href="javascript:;" class="btn btn--m" @click="closeModal">继续购物</a>
        <router-link class="btn btn--m" to='/cart'>查看购物车</router-link>
      </div>
    </Modal>
    <nav-footer></nav-footer>
  </div> 
</template>

<script>
import NavHeader from '@/components/NavHeader'
import NavBread from '@/components/NavBread'
import NavFooter from '@/components/NavFooter'
import Modal from '@/components/Modal'
import axios from 'axios'
import { mapMutations } from 'vuex'
export default {
  name:'GoodList',
  components:{
    NavHeader,
    NavBread,
    NavFooter,
    Modal
  },
  data(){
    return {
      goodsData :[],
      PriceFilter:[{
        startPrice: 500,
        endPrice: 1000
      },{
        startPrice: 1000,
        endPrice: 2000
      },{
        startPrice: 2000,
        endPrice: 5000
      }],
      priceCheckout: 'all', // 价格选择
      filterby : false, // 过滤按钮
      overlayFlag: false, // 遮罩显示隐藏
      page:1,
      pageSize: 8,
      sort: true,
      buys: false, // 加载更多flag
      loading:false,
      mdShow: false, //购物车 未登录弹出框
      cartShow: false, // 购物车 已登陆弹出框
    }
  },
  mounted () {
    this.getGoodsData() 
  },
  methods:{
    ...mapMutations(['updataCartCount']),
    // 获取首屏数据
    getGoodsData (flag = false) {
      let params = {
        page:this.page,
        pageSize: this.pageSize,
        sort: this.sort ? 1 : -1,
        priceLever: this.priceCheckout
      }
      //  加载更多图片
      this.loading = true;
      axios.get('/goods/list',{
        params:params
      })
        .then((res) => {
          this.loading = false;
          console.log(res)
          if(res.status == '200'){
            if(flag){
              console.log(this.goodsData)
              this.goodsData = this.goodsData.concat(res.data.data)
              // 如果差不出来更多数据了 就不让运行 moreload
              if(res.data.limit == 0){
                return this.buys = true
              }
            }else{
              this.goodsData = res.data.data
            }
          }else{
            this.goodsData = []
          }
          //  请求回来后让 让loadmore继续执行.  没有数据了 让他为true
          this.buys = false
        },(err)=>{
          this.loading = false;
          console.log(err)
        }).catch((err)=> {
          console.log(err)
        })
    },
    // 设置价格过滤
    setPriceFilter (index) {
      // 设置价格 
      this.priceCheckout = index
      // 过滤商品 产品为1
      this.page = 1
      // 请求过滤的数据
      this.getGoodsData()
      //  隐藏过滤  关闭遮罩
      this.closePop()
    },
    // 价格过滤隐藏
    showFilterBy () {
      this.filterby = true
      // 遮罩显示
      this.overlayFlag = true
    },
    // 关闭遮罩
    closePop () {
      this.filterby = false
      this.overlayFlag = false
    },
    // 排序
    sortPrice () {
      // 排序点击后 展示第一页数据
      this.sort = !this.sort
      this.page = 1;
      this.getGoodsData()
    },
    // 加载更多
    loadMore: function() {
      this.busy = true;
      console.log('1111')
      setTimeout(() => {
        // 当前页数 ++
        this.page++
        this.getGoodsData(true)
      }, 1000);
    },
    // 添加购物车
    addCart(productId) {
      axios.post('/goods/addCart',{
        productId: productId
      }).then( (response) => {  
        let res = response.data 
        if( res.status == '0') {
          this.cartShow = true //添加成功
          this.updataCartCount(1);
        }else{
          this.mdShow = true // 添加失败
        }
        
      }).catch(function (err) {  
        console.log('/addCart : ',err)
      })
    },
    // 控制模态框
    closeModal () {
      this.mdShow = false
      this.cartShow = false
    },
  
  }
};
</script>
